<template>
    <div class="page">
        <div class="title-view">最新评级变动信息一览</div>

        <table-head-btn @oninput="handleSearch"/>

        <table-view class="table-view" :labels="labels" :data="data" request-btn="点击加载全部" :content-width="400"/>

    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .page{
        .title-view{
            text-align: center;
            line-height: 4.4rem;
        }

        .date-select-box{
            margin: 1rem 0;
        }

        .table-view{
            border-bottom: .8rem solid @color-bg-gray;
        }

        .grade-view{
            border-top: 1px solid @color-line-gray;

            .search-btn{
                line-height: 3.8rem;
                width: 12rem;
                background-color: @app-color;
                color: @color-white;
                border-radius: .3rem;
                text-align: center;
                margin: 1.5rem auto;
            }

            .description{
                font-size: 1.1rem;
                line-height: 1.5rem;
                padding: 0 1.5rem 2rem;
                color: @color-text-gray;
            }
        }

        .line-view-box{
            border-top: 1px solid @color-line-gray;
            border-bottom: .8rem solid @color-bg-gray;
        }
    }
</style>

<script>
    export default {
        data(){

            const items = Array(5).fill('AAA');
            const yearItems = Array(8).fill('').map((o, k)=> 1+k + '年');

            const labels = [
                {
                    label: {
                        max: '债券名称'
                    },
                    key: 'label',
                    width: 88
                },
                {
                    label: {
                        max: '债项评级 ',
                        min: '变动方向',
                    },
                    key: 'year1',
                },
                {
                    label: {
                        max: '债项评级',
                        min: '首次 | 上次 | 最新',
                    },
                    key: 'year3',
                },
                {
                    label: {
                        max: '主体评级',
                        min: '变动方向',
                    },
                    key: 'year5',
                },
                {
                    label: {
                        max: '债项评级',
                        min: '首次 | 上次 | 最新',
                    },
                    key: 'year7',
                },
                {
                    label: {
                        max: '债券类型',
                    },
                    key: 'year10',
                }
            ];

            const data = Array(40).fill({
                label: 'AAA',
                year1: 4.4,
                year3: 4.4,
                year5: 4.,
                year7: 4.4,
                year10: 4.4,
            });

            return {
                dateRange: ['2018-09-09'],
                dateRange2: ['2018-09-09', '2018-09-09'],
                items,
                itemActive: 0,
                yearItems,
                yearItemsActive: 0,
                labels,
                data
            }
        },
        methods: {
            handleSearch(value){
                console.log(value);
            }
        }
    }
</script>